<!-- 首页拓扑图 -->
<template>
  <div class="model">
    <div class="main">
      <!-- 建筑 -->
      <div class="pic">
        <img :src="iconUil" :width="width" :height="height" />
      </div>
      <!-- 文字 -->
      <div class="text" :style="{ transform: 'rotate(' + fontTransform + 'deg)' }">
        <div class="typeface" :style="textStyle">{{ name }}</div>
      </div>
      <!-- 底座 -->
      <div class="mat" :style="mat"></div>
      <!-- 支架 -->
      <div :style="bracket"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [
      "width",
      "height",
      "top",
      "left",
      "right",
      "bottom",
      "name",
      "iconUil",
      "fontTransform",
      "textStyle",
      "mat",
      "bracket"
    ],
    data: function () {
      return {};
    },
  };

</script>

<style lang="scss" scoped>
  .model {
    .main {
      position: absolute;

      .pic {
        img {
        }
      }

      .text {
        color: #fff;
        bottom: 0px;
        text-align: left;
        font-size: 20px;
        z-index: 100;
        cursor: pointer;
        :hover {
          color: #193751;
        }
        .typeface {
          font-size: 20px;
          font-weight: 900;
        }
      }

      .cat {
        width: 100px;
        height: 200px;
        background-color: red;
      }

      .mat {
        /* 默认色 */
        background-image: linear-gradient(40deg,#4e7ba1,50%,#2b4a6e);
      }
    }
  }

</style>
